<template>
<div>
    <button
		:data-text="btnHoverText"
		class="my-btn my-btn-primary my-btn-ghost my-btn-border-stroke  my-btn-text-float-up"
		:class="{'btn-scale-animation':isAnimate}"
		:style="{animationDelay: delay+'s'}"
		@click="btnClick"
		>
		<div class="my-btn-borders">
		    <div class="border-top"></div>
		    <div class="border-right"></div>
		    <div class="border-bottom"></div>
		    <div class="border-left"></div>
		</div>
		<span class="my-btn-text">{{btnText}}</span>
	</button>
</div>
</template>

<script>
import "@/assets/css/myBtnBorderStroke.css";
export default {
	name:"myBorderStrokeBtn",
	props:{
		delay:{
			type: Number,
			default:()=>0
		},
		isAnimate:{
			type: Boolean,
			default:()=>false
		},
		url:{
			type: String
		},
		btnText:{
			type: String
		},
		btnHoverText:{
			type: String
		}
	},
	methods:{
		btnClick(){
			this.$emit("btnClick",this.Url);
		}
	}
}
</script>

<style>
@keyframes scaleAnimation {
	from {
		opacity: 0;
		transform: scale(0);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}
.btn-scale-animation {
	animation: scaleAnimation 1s ease-in backwards;
}
</style>